<template>
    <div class="subnodes">
      <Node v-for="(subnode, index) in subnodes" :key="index" :node="subnode" @add-subnodes="addSubnodes" @add-subseq-node="addSubseqNode" @remove-node="removeNode" @move-backward="moveBackward" @move-forward="moveForward" @move-subnodes-backward="moveSubnodesBackward" @move-subnodes-forward="moveSubnodesForward" />
    </div>
  </template>
  
  <script>
  import Node from './Node.vue';
  
  export default {
    components: {
      Node
    },
    props: {
      subnodes: Array
    },
    methods: {
      addSubnodes(node) {
        this.$emit('add-subnodes', node);
      },
      addSubseqNode(node) {
        this.$emit('add-subseq-node', node);
      },
      removeNode(node) {
        this.$emit('remove-node', node);
      },
      moveBackward(node) {
        this.$emit('move-backward', node);
      },
      moveForward(node) {
        this.$emit('move-forward', node);
      },
      moveSubnodesBackward(subnodes) {
        this.$emit('move-subnodes-backward', subnodes);
      },
      moveSubnodesForward(subnodes) {
        this.$emit('move-subnodes-forward', subnodes);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 组件特定样式 */
  </style>